<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar
      :title="$route.name"
      @click-left="$router.back()"
      left-text="返回"
      left-arrow
    />
    <div><img class="shouImg" :src="info.img" alt="" /></div>
    <div>商品价格：{{ info.price }}</div>
    <div>商品名称：{{ info.goodsname }}</div>
    <div>商品详情：{{num}}</div>
    <div id="desc" v-html="info.description"></div>
    <!-- 商品导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-icon icon="star-o" text="已收藏" color="#ff5000" />
      <van-goods-action-button
        @click="addCart"
        type="warning"
        text="加入购物车"
      />
      <van-goods-action-button @click="goBuy" type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { goodsInfo,addCart } from "../request/api";
import {Dialog} from 'vant'
export default {
  data() {
    return {
      info: {},
      num:1,//商品数量
    };
  },
  computed: {
    ...mapGetters(["getUser"]),
  },
  mounted() {
    //获取当前商品详情接口
    goodsInfo({
      id: this.$route.query.id,
    }).then((res) => {
      console.log(res, "商品详情");
      if (res.code == 200) {
        this.info = res.list[0];
      }
    });
  },
  methods: {
    //封装一个加入购物车事件
    addCart() {
      // this.$router.push('/cart')
      /* 
        购物车界面，必须登录才可以看见，否则无法调用添加购物车接口
        根据购物车的存值情况进行判断
      */
      if (this.getUser) {
        //调用加入购物车接口
        // console.log('准备加入购物车了');
        addCart({
          uid:this.getUser.uid,
          goodsid:this.info.id,
          num:this.num,
        })
        .then(res=>{
          // console.log(res,'加入购物车');
          this.$router.push('/cart')
        })
      } else {
        Dialog.confirm({
          title: "没有登录,无法加入购物车",
          message: "您确认要登录吗?",
        })
          .then(() => {
            //点击确定  跳转到登录组件
            this.$router.push('/login')
          })
          .catch(() => {
            // on cancel
          });
      }
    },
    //封装一个加入订单事件
    goBuy() {
      //跳转到订单事件
      this.$router.push("./order");
    },
  },
};
</script>

<style scoped>
img {
  width: 100%;
}
.shouImg {
  height: 6rem;
}
#desc >>> img {
  width: 100%;
}
</style>